<template>
  <div class="AddBroadcastMachine">
    <div class="cus-title">
      <h4>新增播报机</h4>
    </div>
    <div class="cus-update">
      <el-row style="margin-bottom: 20px">
        <el-col :span="24">
          <el-alert
            title="请填写播报机信息"
            type="info"
            show-icon
            :closable="false"
          />
        </el-col>
      </el-row>
      <el-form ref="form" :model="BindForm" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="播报机编号:" prop="playerId">
          <el-col :span="24">
            <el-input v-model="BindForm.playerId" placeholder="请输入播报机编号" maxlength="20" clearable class="cus-input" />
          </el-col>
        </el-form-item>
        <el-form-item prop="storeId" label="门店:">
          <el-col :span="24">
            <store-select ref="storeSelect" v-model="BindForm.storeId" field="id" />
          </el-col>
        </el-form-item>
        <el-form-item label="版本号:" prop="editionId">
          <el-col :span="24">
            <el-select v-model="BindForm.editionId" class="cus-input" clearable filterable style="width:100%; max-width: 400px">
              <el-option v-for="(item, index) in versionList" :key="index" :value="item.id" :label="item.versionName" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认绑定</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import StoreSelect from '../../../components/StoreSelect/index'
import { Loading } from 'element-ui'
import { editionList, playerAdd } from '@/api/shop'

/** 添加播报机 */
export default {
  name: 'AddBroadcastMachine',
  components: { StoreSelect },
  data() {
    var validateNumber = (rule, value, callback) => {
      var Regx = /^[A-Za-z0-9]*$/
      if (value && value.length > 0 && !Regx.test(value)) {
        callback(new Error('请输入正确的播报机编号'))
      } else {
        callback()
      }
    }
    return {
      versionList: [],
      BindForm: {
        opt: 'add',
        playerId: null,
        type: 0,
        storeId: null,
        editionId: null,
        shopId: parseInt(localStorage.getItem('shopId'))
      },
      rules: {
        playerId: [{ required: true, message: '请输入播报机编号', trigger: 'change' }, { validator: validateNumber, trigger: 'change' }],
        storeId: [{ required: true, message: '请选择门店', trigger: 'change' }],
        editionId: [{ required: true, message: '请选择版本号', trigger: 'change' }]
      }
    }
  },
  created() {
    const vm = this
    editionList().then(res => {
      vm.versionList = res.data.data
    })
  },
  methods: {
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
    },
    submit() {
      const vm = this
      vm.$refs.form.validate((valid) => {
        if (valid) {
          const loadingInstance = Loading.service({ fullscreen: true })
          playerAdd(vm.BindForm).then(res => {
            loadingInstance.close()
            vm.$store.dispatch('tagsView/delView', vm.$route)
            vm.$router.go(-1)
            vm.$message.success('新增播报机成功')
          }).catch(res => {
            loadingInstance.close()
            if (res && res.data && res.data.errno !== 0) {
              this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.AddBroadcastMachine {
  padding: 30px;
  .cus-update {
    padding: 20px 30px;
    padding-bottom: 0px;
    margin-bottom: 30px;
    border: 1px solid #eee;

    .cus-input {
      max-width: 400px;
    }
  }
}
</style>
